<template>
  <!-- 景点介绍 -->
  <div class="page-sight-info">
    <!-- 页面头部 -->
    <van-nav-bar
      left-text="返回"
      title="景点介绍"
      left-arrow
      @click-left="goBack"
    />
    <!-- 入园参考 -->
    <div class="sight-enter-advice">
      <van-cell title="入园参考" icon="flag-o" title-style="text-align: left"/>
      <div v-html="sightInfo.entry_explain"></div>
    </div>
    <!-- 特色玩法 -->
    <div class="sight-enter-advice">
      <van-cell title="特色玩法" icon="flag-o" title-style="text-align: left"/>
      <div v-html="sightInfo.play_way"></div>
    </div>
    <!-- 温馨提示 -->
    <div class="sight-enter-advice">
      <van-cell title="温馨提示" icon="flag-o" title-style="text-align: left"/>
      <div v-html="sightInfo.tips"></div>
    </div>
    <!-- 交通和到达 -->
    <div class="sight-enter-advice">
      <van-cell title="交通和到达" icon="flag-o" title-style="text-align: left"/>
      <div v-html="sightInfo.traffic"></div>
    </div>
  </div>
</template>
<script>
import { ajax } from '@/utils/ajax'
import { SightApis } from '@/utils/apis'
export default {
  data () {
    return {
      sightInfo: {},
      id: ''
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    getSightInfo () {
      const url = SightApis.sightInfoUrl.replace('#{id}', this.id)
      ajax.get(url).then(({ data }) => {
        this.sightInfo = data
      })
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getSightInfo()
  }
}
</script>
<style lang="less">
.page-sight-info {
  .sight-enter-advice {
    background-color: #ffffff;
    padding-top: 10px;
    .van-icon {
      font-size: 20px;
      color: #0091ff
    }
    h4 {
      padding-left: 10px;
      font-size: 13px;
      text-align: left;
    }
    p {
      padding-left: 10px;
      font-size: 13px;
      color: #444;
      line-height: 2;
      text-align: left;
    }
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
